<template>
  <el-dialog
    v-loading.lock="loading"
    class="base-dialog"
    :custom-class="'panna-dialog_big'"
    :title="dataList.EditDevice"
    align="center"
    destroy-on-close
    :visible.sync="innerDialogFormVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    @closed="closeDialog"
  >
    <el-form
      ref="formData"
      class="base-pipeline-layout"
      label-width="150px"
      :model="formData"
      :rules="formRules"
      status-icon
    >
      <el-form-item :label="dataList.DeviceClassifyId" prop="classifyId">
        <DeviceCategory
          v-model="formData.classifyId"
          :is-all="false"
          :disabled="true"
        ></DeviceCategory>
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceNumber"
        :label-width="formLabelWidth"
        prop="num"
      >
        <el-input
          v-model="formData.num"
          autocomplete="off"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="
          $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
        "
        :label-width="formLabelWidth"
        prop="name"
      >
        <el-input v-model="formData.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceEName"
        :label-width="formLabelWidth"
        prop="eName"
      >
        <el-input v-model="formData.eName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceSpecifications"
        :label-width="formLabelWidth"
        prop="specifications"
      >
        <el-input
          v-model="formData.specifications"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.DevicepurposeId"
        :label-width="formLabelWidth"
        prop="purposeId"
      >
        <dic-drop-down-list
          v-model="formData.purposeId"
          dict-code="DevicePurpose"
        ></dic-drop-down-list>
      </el-form-item>

      <el-form-item
        :label="dataList.DevicereceiveStatusId"
        :label-width="formLabelWidth"
        prop="receiveStatusId"
      >
        <dic-drop-down-list
          v-model="formData.receiveStatusId"
          dict-code="deviceReceive"
        ></dic-drop-down-list>
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceSupplierName"
        :label-width="formLabelWidth"
        prop="supplierId"
      >
        <supplier-list v-model="formData.supplierId"></supplier-list>
      </el-form-item>

      <el-form-item
        :label="dataList.DeviceUseDate"
        :label-width="formLabelWidth"
        prop="useDate"
      >
        <el-date-picker
          v-model="formData.useDate"
          type="date"
          :placeholder="dataList.DeviceUseDate"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        v-if="devicePlatformShowStatus"
        :label="dataList.Deviceplatform"
        :label-width="formLabelWidth"
        prop="platform"
      >
        <!-- <el-input v-model="formData.platform" autocomplete="off"></el-input> -->
        <!-- <DicDropDownList
          v-model="formData.platform"
          :value-is-id-or-code.sync="valueIsIdOrCode"
          dict-code="DevicePlatform"
        /> -->
        <el-select
          ref="select"
          v-model="formData.platform"
          :placeholder="dataList.Placeholder"
        >
          <el-option
            v-for="item in devicePlatformList"
            :key="valueIsIdOrCode ? item.id : item.value"
            :label="item.name"
            :value="valueIsIdOrCode ? item.id : item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceBrand"
        :label-width="formLabelWidth"
        prop="brand"
      >
        <el-input v-model="formData.brand" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.eDeviceBrand"
        :label-width="formLabelWidth"
        prop="eBrand"
      >
        <el-input v-model="formData.eBrand" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.Deviceworth"
        :label-width="formLabelWidth"
        prop="worth"
      >
        <el-input v-model="formData.worth" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceFactoryNum"
        :label-width="formLabelWidth"
        prop="factoryNum"
      >
        <el-input v-model="formData.factoryNum" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="
          $i18n.locale === 'en'
            ? dataList.eDeviceStorageAddress
            : dataList.DeviceStorageAddress
        "
        :label-width="formLabelWidth"
        prop="storageAddress"
      >
        <el-input
          v-model="formData.storageAddress"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.eDeviceStorageAddress"
        :label-width="formLabelWidth"
        prop="eStorageAddress"
      >
        <el-input
          v-model="formData.eStorageAddress"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="dataList.DevicePersonResponsibleId"
        :label-width="formLabelWidth"
        prop="personResponsibleIds"
      >
        <!-- <user-drop-down-list
          v-model="formData.personResponsibleId"
          @getData="getData"
        ></user-drop-down-list> -->
        <el-select
          v-model="formData.personResponsibleIds"
          multiple
          :placeholder="dataList.EnterDevicePersonResponsibleId"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteGroup"
          :loading="searchUserLoading"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="dataList.Devicedepart"
        :label-width="formLabelWidth"
        prop="departIdArray"
      >
        <depart-list
          v-model="formData.departIdArray"
          :level="level"
        ></depart-list>
      </el-form-item>

      <el-form-item
        :label="dataList.DevicePhone"
        :label-width="formLabelWidth"
        prop="phone"
      >
        <el-input v-model="formData.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="dataList.Deviceoperator" prop="operator">
        <el-select
          v-model="formData.operator"
          multiple
          :placeholder="dataList.Selectoperator"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteGroup"
          :loading="searchUserLoading"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="dataList.Devicesort"
        :label-width="formLabelWidth"
        prop="sort"
      >
        <el-input v-model="formData.sort" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.Deviceremark"
        prop="remark"
        style="width: 100% !important"
      >
        <el-input
          v-model="formData.remark"
          autocomplete="off"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.Devicemeasuring"
        prop="measuring"
        style="width: 100% !important"
      >
        <el-input
          v-model="formData.measuring"
          autocomplete="off"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.DevicePerformance"
        prop="performance"
        style="width: 100% !important"
      >
        <el-input
          v-model="formData.performance"
          autocomplete="off"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.eDevicePerformance"
        prop="ePerformance"
        style="width: 100% !important"
      >
        <el-input
          v-model="formData.ePerformance"
          autocomplete="off"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceEnvironment"
        prop="environment"
        style="width: 100% !important"
      >
        <el-input
          v-model="formData.environment"
          autocomplete="off"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item v-if="qrcodeHide" :label="dataList.Deviceqrcode">
        <img style="width: 230px; height: 225px" :src="qrcode" />
      </el-form-item>
      <el-form-item
        :label="dataList.DeviceImg"
        prop="imgArray"
        style="width: 100% !important"
      >
        <div class="deviceAddDialogImg">
          <BaseMultipleUpload
            key="BaseUpload"
            ref="BaseUpload"
            v-model="formData.imgArray"
            business-type="110"
            :file-size="5120"
            :limit="3"
            :style-c-s-s="styleCSS"
            :multiple="true"
            :show-file-list="true"
            :list-type="'picture-card'"
            :is-public-file="isPublicFile"
            style="
              display: flex;
              align-items: start;
              padding-left: 10px;
              flex-direction: column;
            "
            :tip="dataList.DeviceImgTip()"
            :accept="'.jpeg,.jpg,.png,.gif,.bmp,.tiff'"
          />
        </div>
      </el-form-item>

      <el-form-item
        :label="dataList.DeviceVideo"
        prop="videoArray"
        style="width: 100% !important"
      >
        <div class="deviceAddDialogImg">
          <BaseVideoUpload
            key="BaseUploadVideo"
            ref="BaseUploadVideo"
            v-model="formData.videoArray"
            :file-size="20"
            :limit="1"
            :style-c-s-s="styleCSS"
            :multiple="true"
            :show-file-list="true"
            :list-type="'picture-card'"
            :is-public-file="isPublicFile"
            style="
              display: flex;
              align-items: start;
              padding-left: 10px;
              flex-direction: column;
            "
            :tip="dataList.DeviceVideoTip"
          />
        </div>
      </el-form-item>

      <el-form-item
        :label="dataList.DeviceAnnex"
        prop="fileArray"
        style="width: 100% !important"
      >
        <div class="deviceAddDialogFile">
          <BaseUploadFile
            key="BaseUploadFile"
            ref="BaseUploadFile"
            v-model="formData.fileArray"
            business-type="120"
            :is-public-file="isPublicFile"
            :file-size="10240"
            :limit="10"
            :multiple="true"
            style="display: flex; align-items: center; padding-left: 10px"
            :tip-text="
              'File Type：pdf、doc、docx、xls、xlsx、zip、rar、apk；' +
              dataList.Device.DeviceAnnexTip
            "
            :accept="'.pdf,.doc,.docx,.xls,.xlsx,.zip,.rar,.apk'"
          />
        </div>
      </el-form-item>

      <el-form-item
        :label="dataList.DeviceTag"
        prop="checkedRows"
        style="width: 100% !important"
      >
        <div class="deviceAddDialogTag">
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              height: 100%;
              padding-left: 10px;
              padding-right: 30px;
            "
          >
            <el-button type="primary" @click="selTag">{{
              btn.SelectTag
            }}</el-button>
          </div>
          <div style="display: flex; flex-direction: row">
            <div
              v-for="(item, index) in checkedRows"
              :key="index"
              style="
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
              "
            >
              <el-image
                :src="item.url"
                style="width: 70px; height: 70px; border-radius: 50%"
              ></el-image>
              <div>{{ item.name }}</div>
              <div style="margin-top: 10px">
                <el-button type="danger" size="mini" @click="delTag(item)">{{
                  btn.Delete
                }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item
        :label="dataList.DeviceSpareparts"
        style="width: 100% !important"
      >
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" :label="dataList.Number" width="100">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <span style="color: red">*</span>
              <span>{{ dataList.Name }}</span>
            </template>
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" autocomplete="off"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <span style="color: red">*</span>
              <span>{{ dataList.DeviceSparepartunit }}</span>
            </template>
            <template slot-scope="scope">
              <el-input v-model="scope.row.unit" autocomplete="off"></el-input
            ></template>
          </el-table-column>
          <el-table-column align="center">
            <template #header>
              <span style="color: red">*</span>
              <span>{{ dataList.Quantity }}</span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.count"
                autocomplete="off"
                :validate-event="false"
                @blur="handleInputBlur(scope.row)"
              ></el-input
            ></template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="dataList.Operation"
            width="100"
          >
            <template slot-scope="scope">
              <el-link
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)"
                >{{ btn.Delete }}</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button style="float: left" type="primary" @click="addParts">{{
          btn.Add
        }}</el-button>
      </el-form-item>
    </el-form>
    <div v-if="!readOnly" slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="onSubmit">{{ btn.Save }}</el-button>
      <el-button @click="closeDialog">{{ btn.Cancel }}</el-button>
    </div>
    <device-tag-dialog-list
      v-if="deviceTagListDialogVisable"
      ref="deviceTagListDialog"
      :device-tag-list-dialog-visable.sync="deviceTagListDialogVisable"
      :checked-rows.sync="checkedRows"
      @checkedRowsFun="checkedRowsFun"
    ></device-tag-dialog-list>
  </el-dialog>
</template>

<script>
import { getUserListNoPage } from "../../api/PermissionUser.js";
import { getToken } from "@/utils/auth";
import DeviceCategory from "../../components/DeviceCategory.vue";
// import UserDropDownList from "../../components/UserDropDownList.vue";
import DepartList from "../../components/DepartList.vue";
import DicDropDownList from "../../components/DicDropDownList.vue";
import SupplierList from "../../components/SupplierList.vue";
import DeviceTagDialogList from "../../components/DeviceTagDialogList.vue";
import { purposeId, receiveStatusId } from "../../utils/const";
import { get, update, getDepartIdList } from "../../api/Device";
import { getConfigByKey, getFirstSubConfigByKey } from "../../api/SystemDict";
import { formatTime } from "../../utils/time";
import { mapGetters } from "vuex";
import {
  GetPublicStaticImgInfo,
  GetStaticImgInfo,
  GetFileInfoUrl,
} from "@/api/Base";
import axios from "axios";

export default {
  name: "DeviceEditDialog",
  components: {
    // UserDropDownList,
    DepartList,
    DicDropDownList,
    SupplierList,
    DeviceTagDialogList,
    DeviceCategory,
  },
  props: {
    dialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    editId: {
      type: String, // 布尔
      default: "", // 必填
    },
    deptreeLevel: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    readOnly: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
  },

  data() {
    return {
      getDevicePlatformUrl:
        window.EnvConfig.VUE_APP_BASE_API + "/api/v1/SystemDict/GetListNoPage",
      innerDialogFormVisible: false,
      deviceTagListDialogVisable: false,
      devicePlatformShowStatus: true,
      styleCSS: "text-align:left",
      classifyList: [],
      formLabelWidth: "150px",
      checkedRows: [],
      userList: [],
      tableData: [],
      valueIsIdOrCode: true,
      devicePlatformList: [],
      searchUserLoading: false,
      isPublicFile: false,
      qrcode: "",
      qrcodeHide: false,
      formData: {
        classifyId: "",
        num: "",
        name: "",
        eName: "",
        specifications: "",
        user: {},
        purposeId: purposeId,
        receiveStatusId: receiveStatusId,
        // personResponsibleId: "",
        storageAddress: "",
        eStorageAddress: "",
        useDate: "",
        factoryNum: "",
        supplierId: "",
        departId: "",
        departIdArray: [],
        remark: "",
        phone: "",
        measuring: "",
        performance: "",
        ePerformance: "",
        environment: "",
        originalVideoName: "",
        storageVideoName: "",
        videoPath: "",
        videoArray: [],
        fileArray: [],
        imgArray: [],
        sysBusinessFileWarehouseList: [],
        sysBusinessImgWarehouseList: [],
        deviceTagInfoList: [],
        platform: "",
        brand: "",
        eBrand: "",
        worth: "",
        operator: [],
        sort: 0,
        qrcode: "",
        usageState: 0,
        personResponsibleIds: [],
        level: -1,
      },
      level: -1,
      formRules: {
        classifyId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        num: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        name: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        eName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        specifications: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        purposeId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        receiveStatusId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        supplierId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        personResponsibleIds: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateArrayFunction,
          },
        ],
        departIdArray: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      loading: true,
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.loading = false;
  },
  mounted() {
    this.initData();
  },
  methods: {
    addParts() {
      this.tableData.push({ name: "", unit: "个", count: 1 });
    },
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    handleInputBlur(row) {
      // 正则表达式：必须为正整数
      const reg = /^[1-9]\d*$/;
      if (!reg.test(row.count)) {
        this.$message.error(this.$t("ModuleDevice.Message.RegPositiveinteger"));
        row.count = 1; // 重置为默认值
      }
    },
    getData(obj) {
      this.formData.phone = obj.mobile;
      if (obj.departmentIds !== "") {
        var departmentIdlist = obj.departmentIds.split(",");
        getDepartIdList({ departId: departmentIdlist[0] }).then((res) => {
          this.formData.departIdArray = res.data;
        });
      }
    },
    getUser(name = "") {
      return new Promise((resolve) => {
        getUserListNoPage({ name: name }).then((res) => {
          resolve(res.data);
        });
      });
    },
    getFileIsPublic() {
      return new Promise((resolve) => {
        getConfigByKey("DeviceFile", 0).then((res) => {
          resolve(res.data ? res.data[0].value : "0");
        });
      });
    },
    // 搜索人员
    async remoteGroup(query) {
      this.searchUserLoading = true;
      const filter = await this.getUser(query);
      if (filter && filter.length) {
        this.userList = filter;
      }
      this.searchUserLoading = false;
    },
    onSubmit() {
      for (let o = 0; o < this.tableData.length; o++) {
        if (!this.tableData[o].name) {
          this.$message.error(this.$t("ModuleDevice.Message.NameNotNull"));
          return false;
        }
        if (!this.tableData[o].unit) {
          this.$message.error(
            this.$t("ModuleDevice.Message.SparepartsUnitNotNull")
          );
          return false;
        }
        if (!this.tableData[o].count) {
          this.$message.error(
            this.$t("ModuleDevice.Message.SparepartsQuantityNotNull")
          );
          return false;
        }
      }

      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.formData.id = this.editId;
          this.formData.deviceTagInfoList = [];
          if (this.checkedRows.length > 0) {
            this.checkedRows.forEach((item) => {
              var obj = {};
              obj.tagId = item.id;
              this.formData.deviceTagInfoList.push(obj);
            });
          }

          // 视频
          if (
            this.formData.videoArray !== null &&
            this.formData.videoArray !== undefined &&
            this.formData.videoArray.length > 0
          ) {
            this.formData.videoArray.forEach((item) => {
              this.formData.originalVideoName = item.originalFileName;
              this.formData.storageVideoName = item.storageFileName;
              this.formData.videoPath = item.filePath;
            });
          } else {
            this.formData.originalVideoName = "";
            this.formData.storageVideoName = "";
            this.formData.videoPath = "";
          }

          // 图片
          this.formData.sysBusinessImgWarehouseList = [];
          if (this.formData.imgArray.length > 0) {
            this.formData.imgArray.forEach((item) => {
              var obj = {};
              obj.fileTpyeCode = 1;
              obj.originalFileName = item.name;
              obj.storageFileName = "";
              obj.filePath = item.imgUrl;
              this.formData.sysBusinessImgWarehouseList.push(obj);
            });
          }
          // 附件
          this.formData.sysBusinessFileWarehouseList = [];
          if (this.formData.fileArray.length > 0) {
            this.formData.fileArray.forEach((item) => {
              var obj = {};
              obj.fileTpyeCode = 2;
              obj.originalFileName = item.name;
              obj.storageFileName = "";
              if (item.url2 === undefined) {
                obj.filePath = item.filePath;
              } else {
                obj.filePath = item.url2;
              }

              this.formData.sysBusinessFileWarehouseList.push(obj);
            });
          }
          // 部门
          if (this.formData.departIdArray.length > 0) {
            this.formData.departId =
              this.formData.departIdArray[
                this.formData.departIdArray.length - 1
              ];
          } else {
            this.formData.departId = 0;
          }

          update(this.formData)
            .then((res) => {
              this.closeDialog();
            })
            .catch((res) => {});
        } else {
          return false;
        }
      });
    },
    checkedRowsFun(rows) {
      this.checkedRows = [];
      rows.forEach((item) => {
        this.checkedRows.push(item);
        // var flag = false;
        // this.checkedRows.forEach((val) => {
        //   if (val.id === item.id) {
        //     flag = true;
        //   }
        // });
        // if (!flag) {
        //   this.checkedRows.push(item);
        // }
      });
    },
    delTag(obj) {
      this.checkedRows = this.checkedRows.filter((item) => {
        return item.id !== obj.id;
      });
    },
    selTag() {
      this.deviceTagListDialogVisable = true;
    },
    getDevicePlatform() {
      // axios({
      //   method: "get",
      //   url: this.getDevicePlatformUrl,
      //   params: { dictCode: "DevicePlatform" },
      //   headers: { Authorization: getToken() },
      // })
      getFirstSubConfigByKey("DevicePlatform").then((res) => {
        if (
          res.data === null ||
          res.data === undefined ||
          res.data.length === 0
        ) {
          this.devicePlatformShowStatus = false;
        } else {
          this.devicePlatformList = res.data;
        }
      });
    },
    async initData() {
      if (this.deptreeLevel) {
        this.level = 2;
      }
      this.getDevicePlatform();
      const userListData = await this.getUser().catch(() => {});
      this.userList = userListData;
      const isPublic = await this.getFileIsPublic();
      if (isPublic && isPublic === "1") {
        this.isPublicFile = true;
      }
      get({ id: this.editId })
        .then((res) => {
          this.formData = res.data;
          this.tableData = res.data.deviceParts;

          if (this.qrcodeHide) {
            this.getQrCode(this.formData.qrCode);
          }
          const promises = res.data.sysBusinessImgWarehouseList.map((item) => {
            return GetPublicStaticImgInfo({
              file: item.filePath,
              isPublicFile: this.isPublicFile,
            }).then((res) => {
              item.url = res.data;
            });
          });
          const promises1 = res.data.deviceTagInfoDtoList.map((item) => {
            return GetPublicStaticImgInfo({
              file: item.imgUrl,
              isPublicFile: this.isPublicFile,
            }).then((res) => {
              item.url = res.data;
            });
          });
          var videoUrl = null;
          if (
            res.data.videoPath !== undefined &&
            res.data.videoPath !== null &&
            res.data.videoPath !== ""
          ) {
            axios({
              method: "get",
              responseType: "blob", // 因为是流文件，所以要指定blob类型
              url: GetFileInfoUrl(res.data.videoPath),
              headers: { Authorization: getToken() },
            }).then(({ data }) => {
              const blob = new Blob([data]);
              videoUrl = URL.createObjectURL(blob);
              if (
                this.formData.originalVideoName !== "" &&
                this.formData.originalVideoName !== null
              ) {
                this.formData.videoArray = [];
                var data1 = {
                  name: this.formData.originalVideoName,
                  originalFileName: this.formData.originalVideoName,
                  storageFileName: this.formData.storageVideoName,
                  filePath: this.formData.videoPath,
                  // url: `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${this.formData.videoPath}`,
                  url: videoUrl,
                };
                this.formData.videoArray.push(data1);
                this.$forceUpdate();
                // this.$refs.BaseUploadVideo.value = this.formData.videoArray;
              } else {
                this.formData.videoArray = [];
              }
            });
          }

          Promise.all(promises1).then(() => {
            this.checkedRows = [];
            this.checkedRows = res.data.deviceTagInfoDtoList;
          });

          Promise.all(promises).then(() => {
            this.formData.deviceTagInfoList = res.data.deviceTagInfoDtoList;

            this.formData.useDate = formatTime(this.formData.useDate);
            this.formData.fileArray = [];
            res.data.sysBusinessFileWarehouseList.map((item) => {
              var obj = item;
              obj.name = item.originalFileName;
              // obj.url = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${item.filePath}`;
              obj.url = `${item.filePath}`;
              this.formData.fileArray.push(obj);
            });

            this.formData.imgArray = [];
            res.data.sysBusinessImgWarehouseList.map((item) => {
              var obj = item;
              obj.name = item.originalFileName;
              // obj.url = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${item.filePath}`;
              obj.url = item.url;
              obj.imgUrl = item.filePath;
              this.formData.imgArray.push(obj);
            });
          });
        })
        .catch((res) => {});
    },
    getQrCode(qrCode) {
      if (qrCode) {
        GetStaticImgInfo(qrCode).then((res) => {
          this.qrcode = res.data;
          this.qrcodeHide = true;
        });
      } else {
        this.qrcodeHide = false;
      }
    },
    closeDialog() {
      this.$emit("getList");
      this.$emit("update:editId", "");
      this.$emit("update:dialogFormVisible", false);
      this.innerDialogFormVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.base-pipeline-layout {
  .el-form-item {
    width: 40% !important;
  }
}
.deviceAddDialogImg {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep .el-upload--picture-card {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep .el-upload-list__item {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep.el-upload {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .tip-text {
    color: red !important;
    font-size: 12px;
  }
  ::v-deep .el-upload-list--picture-card {
    margin-left: 10px;
  }

  ::v-deep .base-upload {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;
  }
}
.deviceAddDialogFile {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep.base-upload {
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    width: 100%;
  }
  ::v-deep .el-upload-list__item {
    width: 50%;
  }
  ::v-deep .el-upload {
    text-align: left;
  }
  ::v-deep .el-upload-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: auto;
  }
  ::v-deep .el-upload__tip {
    color: red;
  }
}
.deviceAddDialogTag {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  display: flex;
  flex-direction: row;
}
</style>
